<template>
  <div class="centerBorder">
    <div class="topContent">
      <span class="myText">{{ text }}</span>
    </div>
    <!-- 定义插槽，以供内容插入 -->
    <slot class="content"></slot>
  </div>
</template>

<script>
export default {
  name: "centerBorder",
  props: {
    text: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 如果需要在子组件内部管理选中值，可以保留，否则可以考虑移除
      selectedValue: ''
    }
  },
  watch: {
    // 如果需要响应 options 的变化，可以添加监听器
    options: {
      handler() {
        // 处理 options 变化，例如重置选中值
        this.selectedValue = ''; // 示例：重置选中值
      },
      deep: true
    }
  },
  methods: {
    // 其他方法
  }
}
</script>

<style scoped>
.content {
  position: absolute;
  top: 22%;
  left: 6%;
  right: 4%;
  bottom: 8%;
}

.centerBorder {
  position: relative;
  background-image: url('../../../assets/aiScreen/mok1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
}

.myText {
  position: absolute;
  color: #fff;
  top: 9%;
  left: 6%;
  font-family: 'Arial', sans-serif;
  /* 使用Arial字体 */
  font-size: 18px;
  /* 字体大小 */
  font-weight: 1000;
  /* 字体加粗 */
  display: inline-block;
  /* 使元素成为行内块级元素 */
  line-height: 1;
  /* 调整行高 */
  background: linear-gradient(to bottom, #e7edf0, #a0cae2);
  /* 渐变背景 */
  -webkit-background-clip: text;
  /* 兼容Webkit内核浏览器 */
  background-clip: text;
  /* 标准属性 */
  -webkit-text-fill-color: transparent;
  /* 使文本颜色透明 */
}

.elSelect {
  position: absolute;
  right: 5%;
  top: 11%;
  transform: translateY(-50%);
}

::v-deep .el-input--suffix .el-input__inner {
  background: #082d48;
  border: 1px solid #0B4871;
  width: 100px;
  height: 22px;
}

::v-deep .el-input__icon {
  line-height: 22px;
}</style>